<template>
  <div class="sale-box">
    <div class="reason-box">
      <ConduitBar
        v-if="getConduitBarData.length"
        class="is-border"
        :option="optionBar"
        :x-axis-data="xAxisData"
        :title="'销售管道'"
        :series="getConduitBarData"
        width="760px"
        height="482px"
        @changeRegion="changeRegion"
      />
      <div v-else class="empty">
        <TitleSecondary title="销售管道" />
        <p-empty />
      </div>
      <FunnelBar
        v-if="getFunnelData.length"
        class="is-border funnel"
        :option="optionFunnel"
        :title="'销售漏斗'"
        :series="getFunnelData"
        width="760px"
        height="482px"
        @changeRegion="changeRegion"
      />
      <div v-else class="empty">
        <TitleSecondary title="销售漏斗" />
        <p-empty />
      </div>
    </div>
    <div class="table">
      <TitleSecondary :title="tableName" />
      <MainTableList
        :columns="columns"
        :data-source="dataSource"
        :loading="loading"
        :pagination="paginationMixin"
        :scroll="{ x: '100%', y: '53vh' }"
        @change="handleTableChange"
      />
    </div>
  </div>
</template>

<script>
import ConduitBar from './ConduitBar.vue';
import FunnelBar from './FunnelBar.vue';
import MainTableList from './mainTableList.vue';

import mixinTable from '@/mixins/mixin-table.js';
import mixinChart from '@/views/analysis-lost-sales/components/mixin.js'

import { postleadsFollowList } from '@/api/clue.js';
import { postBusinessList } from '@/api/business.js';

export default {
  components: {
    ConduitBar,
    FunnelBar,
    MainTableList,
  },
  mixins: [mixinTable, mixinChart],
  props: {
    conduitBarData: {
      type: Array,
      default: () => ([])
    },
    funnelBarData: {
      type: Array,
      default: () => ([])
    }
  },
  data() {
    return {
      optionBar: {
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: false
        }
      },
      optionFunnel: {
        tooltip: {
          trigger: 'item',
        },
      },
      loading: false,
      typeChart: '', // 用来区分点击的是通道，还是漏斗
    };
  },
  computed: {
    xAxisData() {
      return this.conduitBarData?.map((item) => {
        return item.stage === '-1' ? '线索' : this.stageName[item.stage]
      });
    },
    getFunnelData() {
      return this.funnelBarData?.map((item) =>{
        return {
          name: item.stage === '-1' ? '线索' : this.stageName[item.stage],
          value: item.amount,
          stage: item.stage,
          ratio: item.ratio
        };
      })
    },
    getConduitBarData() {
      return this.conduitBarData?.map((item) => {
        return item.amount
      });
    },
    getConduitBarSeries() {
      let typeData = this.typeChart === 'pass' ? 'conduitBarData' : 'funnelBarData';
      return this[typeData]?.map((item) => {
        return {
          name: item.stage === '-1' ? '线索' : this.stageName[item.stage],
          value: item.amount,
          stage: item.stage
        };
      });
    },
    tableName() {
      return this.typeChart === 'pass' ? `销售管道-${this.type}明细数据` : `销售漏斗-${this.type}明细数据`;
    },
    getStage() {
      return this.getConduitBarSeries?.reduce((pre, cur) => {
        if (cur.name === this.type) {
          pre = cur.stage
        }
        return pre
      }, 0)
    },
  },
  watch: {},
  created() {},

  methods: {
    async changeRegion(val, type) {
      this.typeChart = type;
      this.type = val.name || '';
      val.name === '线索' && await this.getClueList();
      val.name !== '线索' && await this.getBusinessList();
      this.$emit('pageUpdate', type);
      this.paginationMixin.current = 1;
    },
    // 线索销售通道参数
    getCluePassParams() {
      const form = {
        ...this.formParams,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        leadsStatus: '0'
      };
      // console.log(this.formParams)
      return form;
    },
    // 线索销售漏斗参数
    getClueFunnelParams() {
      const form = {
        ...this.formParams,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
      };
      return form;
    },
    // 线索接口
    async getClueList() {
      let form = {};
      this.typeChart === 'pass' ? (form = this.getCluePassParams()) : (form = this.getClueFunnelParams());
      this.loading = true;
      // console.log(form)
      const result = await postleadsFollowList(form).finally(
        () => (this.loading = false)
      );
      this.dataSource = result.data.data?.records;
      this.paginationMixin.total = result.data.data?.total;
    },
    // 商机销售通道参数
    getBusPassParams() {
      const form = {
        groupCode: this.formParams.groupCode,
        salesOrgCode: this.formParams.salesOrgCode,
        stageStartTime: this.formParams.startCreateTime,
        stageEndTime : this.formParams.endCreateTime,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        stage: this.getStage,
        state: '2',
        stageExcludeList: ['0']
      };
      return form;
    },
    // 商机销售漏斗参数
    getBusFunnelParams() {
      const form = {
        groupCode: this.formParams.groupCode,
        salesOrgCode: this.formParams.salesOrgCode,
        detailStageStartTime: this.formParams.startCreateTime,
        detailStageEndTime : this.formParams.endCreateTime,
        current: this.paginationMixin.current,
        pageSize: this.paginationMixin.pageSize,
        stage: this.getStage,
        state: '',
        processStatusExcludes: ['0', '3'],
        opportunityStageExcludes: ['0']
      };
      return form;
    },
    // 商机接口
    async getBusinessList() {
      let form = {};
      this.typeChart === 'pass' ? (form = this.getBusPassParams()) : (form = this.getBusFunnelParams());
      this.loading = true;
      // console.log(form)
      const result = await postBusinessList(form).finally(
        () => (this.loading = false)
      );
      this.paginationMixin.total = result.data.data?.total;
      this.dataSource = result.data.data?.records;
    },
    // 分页
    handleTableChange(page, filters, sorter, { currentDataSource }) {
      this.paginationMixin = page;
      this.type === '线索' && this.getClueList();
      this.type !== '线索' && this.getBusinessList();
    },
  },
};
</script>

<style lang="less" scoped>
.table {
  margin-top: 25px;
}
.reason-box {
  display: flex;
  overflow: auto;
  .is-border {
    width: 100%;
    height: 100%;
    padding: 20px 16px;
    border: 1px solid #e5e6e9;
  }
  .funnel {
    margin-left: 20px;
  }
  .empty {
    width: calc(100% - 30px);
  }
}
</style>
